<!DOCTYPE html>
<html>
<head>
    <title>prevent修饰符演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .demo-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin: 10px 0;
        }
        .form-group label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }
        .form-group input {
            width: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 3px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <div id="app">
        <h2>prevent修饰符演示</h2>
        
        <!-- 表单提交控制 -->
        <div class="demo-section">
            <h3>表单提交控制</h3>
            
            <h4>普通表单（会刷新页面）</h4>
            <form action="#" method="post" @submit="handleNormalSubmit">
                <div class="form-group">
                    <label>用户名：</label>
                    <input v-model="normalForm.username" type="text" required>
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input v-model="normalForm.password" type="password" required>
                </div>
                <div class="form-group">
                    <label></label>
                    <button type="submit">提交（会刷新）</button>
                </div>
            </form>
            
            <h4>使用.prevent的表单（阻止刷新）</h4>
            <form @submit.prevent="handlePreventSubmit">
                <div class="form-group">
                    <label>用户名：</label>
                    <input v-model="preventForm.username" type="text" required>
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input v-model="preventForm.password" type="password" required>
                </div>
                <div class="form-group">
                    <label></label>
                    <button type="submit">提交（不刷新）</button>
                </div>
            </form>
            
            <div v-if="submitStatus" :class="['status', submitStatus.type]">
                {{ submitStatus.message }}
            </div>
        </div>
        
        <!-- 链接跳转控制 -->
        <div class="demo-section">
            <h3>链接跳转控制</h3>
            <p>
                <a href="https://www.baidu.com" target="_blank">普通链接（会跳转）</a> |
                <a href="https://www.baidu.com" @click.prevent="handleLinkClick">阻止跳转的链接</a> |
                <a href="https://www.google.com" @click.prevent="confirmAndJump($event)">确认后跳转</a>
            </p>
            <div v-if="linkStatus" class="status info">
                {{ linkStatus }}
            </div>
        </div>
        
        <!-- 右键菜单控制 -->
        <div class="demo-section">
            <h3>右键菜单控制</h3>
            <div style="width: 300px; height: 100px; background: #f0f0f0; border: 1px solid #ccc; padding: 20px; text-align: center; line-height: 60px;"
                 @contextmenu.prevent="showCustomMenu">
                右键点击这里（自定义菜单）
            </div>
            <div v-if="customMenuVisible" class="status info">
                自定义右键菜单被触发！时间：{{ customMenuTime }}
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive } = Vue;
        
        createApp({
            setup() {
                const normalForm = reactive({
                    username: '',
                    password: ''
                });
                
                const preventForm = reactive({
                    username: '',
                    password: ''
                });
                
                const submitStatus = ref(null);
                const linkStatus = ref('');
                const customMenuVisible = ref(false);
                const customMenuTime = ref('');
                
                const handleNormalSubmit = (event) => {
                    console.log('普通表单提交', normalForm);
                    // 这里不阻止默认行为，页面会刷新
                };
                
                const handlePreventSubmit = () => {
                    console.log('阻止默认行为的表单提交', preventForm);
                    
                    if (preventForm.username && preventForm.password) {
                        submitStatus.value = {
                            type: 'success',
                            message: `登录成功！用户名：${preventForm.username}`
                        };
                    } else {
                        submitStatus.value = {
                            type: 'error',
                            message: '请填写完整的用户名和密码'
                        };
                    }
                    
                    setTimeout(() => {
                        submitStatus.value = null;
                    }, 3000);
                };
                
                const handleLinkClick = () => {
                    linkStatus.value = '链接点击被阻止，没有跳转';
                    setTimeout(() => {
                        linkStatus.value = '';
                    }, 3000);
                };
                
                const confirmAndJump = (event) => {
                    if (confirm('确定要跳转到Google吗？')) {
                        // 手动跳转
                        window.open(event.target.href, '_blank');
                        linkStatus.value = '用户确认，手动跳转到Google';
                    } else {
                        linkStatus.value = '用户取消，没有跳转';
                    }
                    
                    setTimeout(() => {
                        linkStatus.value = '';
                    }, 3000);
                };
                
                const showCustomMenu = () => {
                    customMenuVisible.value = true;
                    customMenuTime.value = new Date().toLocaleTimeString();
                    
                    setTimeout(() => {
                        customMenuVisible.value = false;
                    }, 3000);
                };
                
                return {
                    normalForm,
                    preventForm,
                    submitStatus,
                    linkStatus,
                    customMenuVisible,
                    customMenuTime,
                    handleNormalSubmit,
                    handlePreventSubmit,
                    handleLinkClick,
                    confirmAndJump,
                    showCustomMenu
                };
            }
        }).mount('#app');
    </script>
</body>
</html>
